<template>
  <div class="nav-bar">
    <div class="nav-bar-mid">
      <span class="logo">
<!--      GAI-->
    </span>
      <div class="nav-left">
        <template>
          <router-link to="/">主页</router-link>
          <router-link to="/music">音乐</router-link>
          <router-link to="/video">影视</router-link>
          <router-link to="/interview">专访</router-link>
        </template>
      </div>
      <div class="nav-right"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavBar"
}
</script>

<style scoped>
.nav-bar{
  background-color: white;
  height: 60px;
  width: 100%;
  line-height: 60px;
}
.logo{
  color: white;
  font-size: 30px;
  float: left;
}
.nav-bar-mid{
  background-color: white;
  width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.nav-left{
  width:380px;
  font-size:18px;
  font-wight:700;
  background-color:white;
  /*float: left;*/
  margin-left: auto;
  margin-right: auto;
}
.nav-left a{
  padding: 20px;
  font-weight: 800;
}
.nav-left a:not(.router-link-exact-active){
  color: black;
}
.nav-left a:hover{
  color: rgb(245,132,84);
}
.router-link-exact-active{
  color: rgb(245,132,84);
}
</style>